<template>
  <div id="user_box">
    <div class="user_header">
      <module-header/>
    </div>
    <div class="user_nav">
      <el-breadcrumb separator="/" class="user_nav_tab">
        <el-breadcrumb-item v-for="(val, item) in userPath" :key="item" v-if="val.number ===1">
          <router-link :to="{path:''+val.path}" class="user_nav_router_link" >{{val.title}}</router-link>
        </el-breadcrumb-item>
        <!--设置-->
        <el-breadcrumb-item v-for="(val, item) in userPath" :key="item" v-if="val.title === userTitle">
          <router-link :to="{path:''+val.path}" class="user_nav_router_link" style="font-weight: 700">{{val.title}}</router-link>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="user_section">
      <!--      侧边栏-->
      <div class="user_aside">
        <!-- 用户头像-->
        <div class="user_aside_logo">
          <img :src="require('@/assets/img/logo.jpg')" style="width: 100px;height: 100px">
          <h5>用户名</h5>
        </div>
        <!--侧边栏导航栏-->
        <div class="user_aside_nav">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose">
                <el-menu-item index="1" @click="toPath(userPath[1])">
                  <i class="el-icon-menu"></i>
                  <span slot="title">用户界面</span>
                </el-menu-item>
                <el-menu-item index="2" @click="toPath(userPath[2])">
                  <i class="el-icon-user"></i>
                  <span slot="title">用户信息</span>
                </el-menu-item>
                <el-menu-item index="3" @click="toPath(userPath[3])">
                  <i class="el-icon-position"></i>
                  <span slot="title">地址管理</span>
                </el-menu-item>
                <el-menu-item index="4" @click="toPath(userPath[4])">
                  <i class="el-icon-document"></i>
                  <span slot="title">订单管理</span>
                </el-menu-item>
                <el-menu-item index="5" @click="toPath(userPath[5])">
                  <i class="el-icon-setting"></i>
                  <span slot="title">修改密码</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </div>
      </div>
      <!--      主体栏-->
      <el-card class="box-card user_article">
        <router-view v-if="userTitle!==''"/>
        <div v-else >
          <el-divider content-position="left">用户首页</el-divider>
<!--    显示全部功能      -->
          <div class="user_article_other">
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <img :src="require('@/assets/img/logo.jpg')" >
                </div>
              </el-col>
              <el-col :span="20">
                <div class="grid-content bg-white">
                  <div class="flex-layout flex-column justify-evenly" style="width: 100%;height: 125px;box-sizing: border-box;padding: 0 20px">
                    <div class="flex-layout justify-start" style="height:30px">
                      <div class="width-per-40 color-white bg-blue radius-5 text-left pad--left-10" style="height: 30px;line-height: 30px"><strong>用户昵称：</strong>{{this.$store.state.vuex_user_Info.uName}}</div>
                      <div class="width-per-40 color-white bg-blue radius-5 text-left pad--left-10" style="height: 30px;margin-left: 20px;line-height: 30px">
                        <strong>用户年龄：</strong>{{this.$store.state.vuex_user_Info.uAge}}
                      </div>
                    </div>
                    <div class="flex-layout justify-start" style="height:30px">
                      <div class="bg-blue color-white radius-5 text-left pad--left-10" style="height: 30px;line-height: 30px;width: 30%">
                        <strong>用户账号：</strong>{{this.$store.state.vuex_user_Info.account}}
                      </div>
                      <div class="bg-blue color-white radius-5 text-left pad--left-10" style="height: 30px;line-height: 30px;width: 20%;;margin-left: 20px;">
                      <strong>用户性别：</strong>{{this.$store.state.vuex_user_Info.uSex===0?'男':'女'}}
                    </div>
                      <div class="bg-blue color-white radius-5 text-left pad--left-10" style="height: 30px;line-height: 30px;width: 40%;;margin-left: 20px;">
                        <strong>出生日期：</strong>
                        {{this.$store.state.vuex_user_Info.uBirthDate.slice(0,4)}}年
                        {{this.$store.state.vuex_user_Info.uBirthDate.slice(4,6)}}月
                        {{this.$store.state.vuex_user_Info.uBirthDate.slice(6,8)}}日
                      </div>
                    </div>
                    <div class="flex-layout color-white justify-start bg-blue radius-5 pad--left-10" style="height:30px;line-height: 30px;width: 80%">
                      <strong>联系电话：</strong>{{this.$store.state.vuex_user_Info.uPhone}}
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="grid-content color-white flex-layout align-center bg-cyan" @click="funCheck(1)">
                  <h2 class="flex-layout align-center ">
                  <i class="el-icon-edit fs-45 mar-right-10 mar-left-30" ></i>
                  编辑用户信息</h2>
                </div></el-col>
              <el-col :span="8"><div class="grid-content color-white flex-layout align-center bg-green" @click="funCheck(2)">
                <h2 class="flex-layout align-center ">
                  <i class="el-icon-shopping-cart-1 fs-45 mar-right-10 mar-left-50" ></i>
                  购物车信息</h2>
              </div></el-col>
              <el-col :span="8"><div class="grid-content color-white flex-layout align-center bg-orange" @click="funCheck(3)">
                <h2 class="flex-layout align-center ">
                  <i class="el-icon-document-checked fs-45 mar-right-10 mar-left-30" ></i>
                  用户订单信息</h2>
              </div></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                  <div class="grid-content color-white flex-layout align-center bg-yellow" >
                    <h2 class="flex-layout align-center ">
                      <i class="el-icon-position fs-45 mar-right-10 mar-left-20" ></i>
                      地址信息</h2>
                  </div>
              </el-col>
              <el-col :span="6"><div class="grid-content color-white flex-layout align-center bg-mauve" @click="funCheck(5)">
                <h2 class="flex-layout align-center ">
                  <i class="el-icon-edit-outline fs-45 mar-right-10 mar-left-20" ></i>
                  修改密码</h2>
              </div></el-col>
              <el-col :span="6"><div class="grid-content color-white flex-layout align-center bg-red" @click="funCheck(6)">
                <h2 class="flex-layout align-center ">
                  <i class="el-icon-attract fs-45 mar-right-10 mar-left-50" ></i>
                  帮助</h2>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-black color-white flex-layout align-center" @click="exit">
                <h3 class="flex-layout align-center ">
                  <i class="el-icon-setting fs-45 mar-right-10 mar-left-30" ></i>
                  退出登录</h3>
              </div></el-col>
            </el-row>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import moduleHeader from '../components/Common/Header'
export default {
  name: 'User',
  components: {
    moduleHeader
  },
  data () {
    return {
      isCollapse: false, // 控制侧边栏的宽度
      userPath: [
        {
          path: '/',
          title: '首页',
          number: 1
        }, {
          path: '/user',
          title: '用户界面',
          number: 1,
          icon: 'el-icon-menu'
        }, {
          path: '/user/userInfo',
          title: '用户信息',
          number: 2,
          icon: 'el-icon-user'
        }, {
          path: '/user/address',
          title: '地址管理',
          number: 2,
          icon: 'el-icon-position'
        }, {
          path: '/user/order',
          title: '订单管理',
          number: 2,
          icon: 'el-icon-document'
        }, {
          path: '/user/updatePassword',
          title: '修改密码',
          number: 2,
          icon: 'el-icon-setting'
        }
      ], // 管理路径信息
      userTitle: '' // 进行路径标识的参数
    }
  },
  methods: {
    // 侧边栏的函数
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    // 导航栏下的子路径跳转
    toPath (obj) {
      console.log(obj)
      if (obj.number === 1) {
        this.userTitle = '' // 如果点击的是用户页面，则设置标题为空字符
      } else {
        this.userTitle = obj.title // 设置路径切换过去的导航栏
      }
      this.$router.push(`${obj.path}`) // 跳转到对应的路径
    },
    funCheck (number) {
      if (number === 1) {
        this.$router.push('/user/userInfo')
      } else if (number === 2) {
        this.$router.push('/cart')
      } else if (number === 3) {
        this.$router.push('/user/order')
      } else if (number === 4) {
        this.$router.push('/user/address')
      } else if (number === 5) {
        this.$router.push('/user/updatePassword')
      } else {
        this.$message({
          message: '暂未开发',
          type: 'success'
        })
      }
    },
    pathChange (path) {
      this.$router.push(path)
    },
    exit () {
      console.log('退出登录')
      this.$confirm('是否用户登录状态?', '退出登录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // type: 'warning',
        center: true
      }).then(() => {
        this.$store.commit('updateUserLogin', false)
        this.$store.commit('updateUserInfo', null)
        if (!this.$store.state.vuex_user_login) {
          this.$message({
            type: 'success',
            message: '退出登录成功，即将跳转到首页'
          })
          setTimeout(() => {
            this.$router.push('/')
          }, 1000)
        }
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="less" scoped>
#user_box{
  width: 100%;
  height: 100%;
  background: white;
  /*头部*/
  .user_header{
    width: 100%;
    height: 95px;
    /*background: blue;*/
  }
  /* 导航栏 */
  .user_nav {
    width: 100%;
    background: white;
    height: 35px;
    margin-bottom: 15px;
    border-top: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
    .user_nav_tab{
      width: 70%;
      line-height: 30px;
      margin: 4px auto;
      font-size: 15px;
      .user_nav_router_link{
        font-weight: normal;
        cursor: pointer;
      }
    }
  }
  /*主体*/
  .user_section {
    width: 70%;
    height: 550px;
    /*background: yellow;*/
    border-radius: 8px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .user_aside{
      border: 1px solid gainsboro;
      width: 150px;
      border-radius: 5px;
      /*background: blue;*/
      box-shadow: 0.1px 0.1px 0.1px 0.1px gainsboro;
      /*.user_aside_logo {*/
      /*  width: 150px;*/
      /*  height: 150px;*/
      /*  display: flex;*/
      /*  align-items: center;*/
      /*  justify-content: space-evenly;*/
      /*  flex-direction: column;*/
      /*  border-bottom: 1px solid gainsboro;*/
      /*  img {*/
      /*    border-radius: 5px;*/
      /*  }*/
      /*}*/
      .user_aside_nav {
        width: 100%;
      }
    }
    .user_article {
      width: 85%;
      height: 100%;
      /*background: red;*/
      border-radius: 5px;
      border: 1px solid gainsboro;
      .user_article_box {
        width: 100%;
        .user_logo {
          width: 100%;
          display: flex;
          box-sizing: border-box;
          padding: 0 20px;
          justify-content: space-between;
          img {
            width: 100px;
            height: 100px;
          }
          .user_Info{
            height: 100px;
            display: flex;
            width: 700px;
            flex-direction: column;
            justify-content: space-between;
            div{
              text-align: left;
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
          }
        }

      }
      .user_article_other {
        width: 100%;
        /*background: red;*/
        img {
          width: 125px;
          height: 125px;
          border-radius: 5px;
        }
      }
    }
  }
}
/*  element ui 侧边栏样式 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 150px;
  min-height: 400px;
}
/*element ui 卡片样式*/
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
/*.bg-purple {*/
/*  background: #d3dce6;*/
/*}*/
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 125px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
